<template>
	<view class="operate-container">
		<view class="comment-box" @click="onCommitClick">
			<my-search :placeholderText="placeholder" :config="{
				height:28,
				backgroundColor:'#eeedf4',
				icon:'/static/images/input-icon.png',
				color:'#a6a5ab',
				border:'none'
			}"></my-search>
		</view>
		<!-- 点赞 -->
		    <view class="options-box">
		      <article-praise :articleData="articleData" @changePraise="$emit('changePraise', $event)" />
		    </view>
		    <!-- 收藏 -->
		    <view class="options-box">
		      <article-collect :articleData="articleData" @changeCollect="$emit('changeCollect', $event)" />
		    </view>
	</view>
</template>

<script>
	import {mapActions} from 'vuex'
	export default {
		name:"article-operate",
		props: {
		    articleData: {
		      type: Object,
		      required: true
		    },
			placeholder:{
				type: String,
				default: '评论一句,前排打Call...'
			}
		  },
		data() {
			return {
				
			};
		},
		methods:{
			...mapActions('user',['isLogin']),
			async onCommitClick(){
				const isLogin = await this.isLogin()
				if(!isLogin){
					return 
				}
				this.$emit('commitClick')
			}
		}
	}
</script>

<style lang="scss" scoped>
.operate-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $uni-bg-color;
  padding: 4px 6px 32px 6px;
  display: flex;
  border-top: 1px solid $uni-bg-color-grey;
  align-items: center;
  .comment-box {
    flex-grow: 1;
  }

  .options-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    .img {
      width: $uni-img-size-base;
      height: $uni-img-size-base;
    }
    .txt {
      font-size: $uni-font-size-sm;
      color: $uni-text-color;
    }
  }
}
</style>
